<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-09 10:21:36
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 09:01:56
-->
<template>
  <div class="right-echarts-node">
    <div class="tip">
      <span>工单数据统计</span>
      <dv-decoration2 :dur="2" />
    </div>
    <div style="display: flex">
      <div ref="siteEcharts" class="right-site-echarts" id="right-site-echarts1"></div>
      <div ref="siteEcharts" class="right-site-echarts" id="right-site-echarts2"></div>
      <div ref="siteEcharts" class="right-site-echarts" id="right-site-echarts3"></div>
    </div>
  </div>
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted, defineComponent, onUnmounted, nextTick } from 'vue';
import { Progress } from 'ant-design-vue';
import { orderTypeApi } from '/@/api/data-statistics/index';
import { useUserStore } from '/@/store/modules/user';
import '@/assets/js/highcharts/highcharts.js';
import '@/assets/js/highcharts/highcharts-3d.js';
import '@/assets/js/highcharts/modules/exporting.js';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
export default defineComponent({
  components: { Progress },
  setup() {
    const userStore = useUserStore();

    let { proxy } = getCurrentInstance();
    let options = ref({});
    let chart;

    let total = 0;

    /**
     * 初始化图表
     */
    function initEcharts(dom, data, name, color) {
      let chart = echarts.init(document.getElementById(dom));
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        chart.resize();
      });
      // 绘制图表
      chart.setOption({
        // 图表主标题
        title: {
          text: name,
          bottom: 0,
          left: 'center',
          textStyle: {
            // 文本样式
            fontSize: 18,
            fontWeight: 600,
            color: '#fff',
          },
        },
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#333', // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter(value) {
            return value.seriesName + ': ' + Number(parseFloat(value.data).toFixed(2)) * 100 + '%';
          },
        },
        series: [
          {
            type: 'liquidFill',
            name, // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '90%', // 水球图的半径
            center: ['50%', '45%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'circle',
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: color, // 边框颜色
              },
            },
            // 图形样式
            itemStyle: {
              color, // 水球显示的背景颜色
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 10, // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#000', // 水球未到的背景颜色
              opacity: 0.5,
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8, // 鼠标经过波浪颜色的透明度
              },
            },
            // 图形上的文本标签
            label: {
              fontSize: 25,
              fontWeight: 400,
              color: '#fff',
            },
            data, // 系列中的数据内容数组
          },
        ],
      });
      if (chart) {
        chart.resize();
      }
    }

    function init() {
      let orderType = userStore?.dictItems?.order_type;
      orderTypeApi().then((res) => {
        total = res.reduce((sum, item) => sum + item.num, 0);

        let config = {
          0: '#BEDD8C',
          1: '#5B8FF9',
          2: '#6300BF',
        };

        // 计算每个状态的订单数量占总订单数量的百分比
        const percentages = res.map((item) => ({
          name: orderType.find((_) => parseInt(_['value'], 10) == item.type)?.label,
          percentage: item.num !== 0 ? Number(parseFloat((item.num / total) * 100).toFixed(2)) : 0,
        }));
        percentages.map((_, i) => {
          initEcharts(`right-site-echarts${i + 1}`, [_.percentage / 100], _.name, config[i]);
        });
      });
    }

    onMounted(() => {
      init();
      window.addEventListener('resize', init);
    });

    return {};
  },
});
</script>

<style lang="less" scoped>
.right-echarts-node {
  width: 100%;
  height: 100%;
  padding: 0 0 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(100px);
  .tip {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-39.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    span {
      position: relative;
    }
    .dv-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 11px;
      width: 95%;
      height: 5px;
    }
  }
  .right-site-echarts {
    width: 33%;
    height: 160px;
    margin: 0 7px;
  }
  .legend-list {
    margin: 20.66px 0 0;
    ul {
      display: grid;
      padding: 0 24px;
      margin: 0;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 12px 30px;
      li {
        width: 100%;
        color: #fff;
        &::before {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          margin: 0 5px 0 0;
          border: 1px solid #fff;
          border-radius: 50%;
        }
        &:first-child {
          &::before {
            background: rgba(24, 144, 255, 1);
          }
        }
        &:nth-child(2) {
          &::before {
            background: rgba(47, 194, 91, 1);
          }
        }
        &:nth-child(3) {
          &::before {
            background: rgba(240, 72, 100, 1);
          }
        }
        &:nth-child(4) {
          &::before {
            background: rgba(19, 194, 194, 1);
          }
        }
        &:nth-child(5) {
          &::before {
            background: rgba(250, 204, 20, 1);
          }
        }
      }
    }
  }
}
</style>
